<!--
 * @description: 
 * @Author: lhr
 * @Date: 2020-12-07 09:47:42
 * @LastEditors: lhr
 * @LastEditTime: 2020-12-07 10:00:06
-->
<template>
  <teleport to="body">
    <div v-show="modelValue" class="dia-wrap">
      <div class="dia-main">
        <p>{{ text }}</p>
        <button @click="closeDia">关闭</button>
      </div>
    </div>
  </teleport>
</template>
<script>
export default {
  props: ["modelValue", "text"],
  methods: {
    closeDia() {
      this.$emit("update:modelValue", false);
    },
  },
};
</script>
<style scoped>
.dia-wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dia-main {
  min-width: 200px;
  max-width: 500px;
  padding: 30px;
  text-align: center;
  background: #fff;
  border-radius: 5px;
}
</style>
